<template>
    <div>
        <div class="container">
              <div class="margin-div"></div>
              <table>
                  <tr>
                      <td>设备用户名</td>
                      <td><el-input type="text"  placeholder="请输入用户名" :minlength="2"   :maxlength="12" v-model="role_name"></el-input></td>
                  </tr>
                  <tr>
                      <td>手机号</td>
                      <td><el-input type="text"  placeholder="请输入用户名" :minlength="2"   :maxlength="11" v-model="phone"></el-input></td>
                  </tr>
                  <tr>
                      <td>备注</td>
                      <td>
                          <el-input
                                  type="textarea"
                                  :rows="4"
                                  placeholder="请输入备注"
                                  v-model="remark">
                          </el-input>
                          <i>{{remark.length}}/20</i>
                      </td>
                  </tr>
              </table>
            <div class="btn-area">
                <a class="btn blue" @click="sure">保存</a>
            </div>
        </div>

    </div>
</template>
<script>
    export default{
        data(){
            return{
                id:'',
                remark:'',
                role_name:'',
                phone:'',

            }
        },
        created(){

        },
        components:{

        },
        methods:{

            sure(){
                //编辑
                this.$http.post('user/create_user',{
                    account:this.phone,
                    username:this.role_name,
                }).then(res=>{
                    if(!res.result){
                        this.$message('添加成功')
                       window.history.back()
                    }
                })


            }
        }
    }
</script>
<style lang="scss" scoped>
 .container{
     font-size:14px;
     background:#fff;
     margin-left:24px;
     min-height:500px;
     width:100%;
         .margin-div{
             height:30px;
         }
         table{
             margin:0 auto;
             width:500px;
         tr{
         td:first-child{
             padding-right:20px;
             text-align: end;
         }
         }
         td{
             padding:10px 0;
             i{
                 position: relative;
                 float: right;
                 height: 20px;
                 top: -25px;
                 margin-right: 10px;
             }
         }
         }
 }
 .btn-area{
     position:relative;
     height:54px;
     margin:30px auto;
     width:250px;
     font-size:12px;
     .btn{
         display:inline-block;
         width:250px;
         height:30px;
         line-height:30px;
         border-radius: 2px;
         text-align: center;
     }
     .blue{
         background: #3494E7;
         border:1px #3494E7 solid;
         color:#fff;
     }
 }
</style>